<template>
  <div id="box">
    <img :src="imge" />
    <h4 :style="{ backgroundColor: colStr }" @click="btn">{{ name }}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colStr: "#fff",
    };
  },
  props: ["imge", "name"],
  methods: {
    btn() {
      this.colStr = `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(
        Math.random() * 255
      )},${Math.ceil(Math.random() * 255)})`;
      //
      this.$emit("love", this.name);
    },
  },
};
</script>

<style scoped>
img {
  width: 500px;
  height: 500px;
}
h4 {
  text-align: center;
}
#box {
  border: 1px solid #000;
  width: 502px;
  height: 550px;
  float: left;
}
</style>